<template>
  <div class="menuSet">
    <div class="content__body">
      <el-form
        :model="formData"
        ref="formRef"
        @submit.prevent
        label-width="80px"
      >
        <el-row>
          <el-col :span="12">
            <el-form-item label="菜单名称" prop="menuName">
              <el-input
                v-model="formData.menuName"
                class="width-custom"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="菜单编码" prop="menuCode">
              <el-input
                v-model="formData.menuCode"
                class="width-custom"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="菜单路径" prop="menuPath">
              <el-input
                v-model="formData.menuPath"
                class="width-custom"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="菜单图标" prop="icon">
              <el-select
                v-model="formData.icon"
                placeholder="请选择"
                style="width: 100%"
              >
                <el-option v-for="item in iconList" :key="item" :value="item">
                  <span><i :class="item"></i>&emsp;{{ item }}</span>
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="菜单顺序" prop="menuOrder">
              <el-input-number
                v-model="formData.menuOrder"
                :min="1"
                :max="20"
                size="mini"
              ></el-input-number>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="是否显示" prop="isDisplay">
              <el-radio-group
                v-model="formData.isDisplay"
                size="mini"
                @change="handleRadio"
              >
                <el-radio-button :label="IsDisplayEnum.SHOW_VAL"
                  >是</el-radio-button
                >
                <el-radio-button :label="IsDisplayEnum.HIDDEN_VAL"
                  >否</el-radio-button
                >
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item
              label="入口菜单"
              prop="menuUrl"
              v-if="formData.isDisplay === IsDisplayEnum.HIDDEN_VAL"
            >
              <el-input
                v-model="formData.menuUrl"
                class="width-custom"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <!-- <el-row>
          <el-col :span="12">
            <el-form-item label="叶子节点">
              <el-radio-group v-model="formData.isLeaf" size="mini">
                <el-radio-button :label="IsLeafEnum.YES">是</el-radio-button>
                <el-radio-button :label="IsLeafEnum.NO">否</el-radio-button>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item
          label="操作按钮"
          v-if="formData.isLeaf === IsLeafEnum.YES"
        >
          <div class="content__body--table">
            <el-table
              :data="formData.resourceList"
              border
              width="80%"
              ref="tableRef"
            >
              <el-table-column type="index" label="序号" width="50">
              </el-table-column>
              <el-table-column label="操作名称">
                <template #default="{ row, $index }">
                  <el-form-item
                    :prop="'resourceList.' + $index + '.resourceName'"
                    :rules="{
                      require: true,
                      message: '请填写完整',
                      trigger: ['blur', 'change']
                    }"
                  >
                    <el-input v-model="row.resourceName"></el-input>
                  </el-form-item>
                </template>
              </el-table-column>
              <el-table-column label="标识码">
                <template #default="{ row, $index }">
                  <el-form-item
                    :prop="'resourceList.' + $index + '.resourceKey'"
                    :rules="{
                      require: true,
                      message: '请填写完整',
                      trigger: ['blur', 'change']
                    }"
                  >
                    <el-input v-model="row.resourceKey"></el-input>
                  </el-form-item>
                </template>
              </el-table-column>
              <el-table-column label="操作" fixed="right" width="80">
                <template #default="{ $index }">
                  <el-button type="text" @click="delResourceParams($index)"
                    >删除</el-button
                  >
                </template>
              </el-table-column>
            </el-table>
            <el-button
              class="table__footer--btn"
              size="mini"
              @click="addResourceParams"
              icon="el-icon-add"
              >添 加</el-button
            >
          </div>
        </el-form-item> -->
      </el-form>
    </div>

    <div class="content__footer">
      <el-button @click="handleCancel">取 消</el-button>
      <el-button type="primary" @click="handleSubmit">确 定</el-button>
    </div>
  </div>
</template>

<script lang="ts">
import {
  defineComponent,
  reactive,
  ref,
  toRefs,
  onMounted,
  toRef,
  PropType,
  nextTick
} from "vue";
// import { successMessage, warnMessage } from "/@/utils/message";
import NotifMessage from "/@/utils/message/notification";

import { addMenuList, updateMenuList } from "/@/api/menu";
import { cloneDeep } from "lodash-es";

import { MenuType, ModeType, IsDisplayEnum, IsLeafEnum } from "../types";

export default defineComponent({
  name: "menuSet",
  props: {
    menuData: {
      type: Object as PropType<MenuType>,
      default: () => {}
    },
    mode: {
      type: String as PropType<ModeType>,
      require: true,
      default: "add"
    }
  },
  emits: ["emitClose"],
  setup(props, { emit }) {
    const tableRef = ref<HTMLTableElement | null>(null) as any;
    const menuDataProp = toRef(props, "menuData");

    let state = reactive<{ formData: MenuType }>({
      formData: {
        menuName: "",
        menuCode: "",
        menuUrl: "",
        menuPath: "",
        isDisplay: IsDisplayEnum.SHOW_VAL,
        icon: "",
        menuOrder: "",
        // isLeaf: IsLeafEnum.NO,
        isLeaf: "",
        parentId: 0,
        resourceList: []
      }
    });

    const iconList = [
      "el-icon-message-solid",
      "el-icon-menu",
      "el-icon-news",
      "el-icon-s-help",
      "el-icon-discover",
      "el-icon-folder-opened",
      "el-icon-s-operation",
      "el-icon-setting",
      "el-icon-folder",
      "iconfont icon-rencai",
      "iconfont icon-shouye",
      "iconfont icon-wendang",
      "iconfont icon-xitong",
      "iconfont icon-xiangmu",
      "iconfont icon-xinxi",
      "iconfont icon-jingfei",
      "iconfont icon-chengguo",
      "iconfont icon-chengguo-2",
      "iconfont icon-jingfei"
    ];

    // 编辑
    if (props.mode === "edit") {
      const copyMenuDataProp = cloneDeep(menuDataProp.value);
      console.log(copyMenuDataProp, "copyMenuDataProp");
      state.formData = copyMenuDataProp;
    }
    // 添加子节点
    if (props.mode === "child_add") {
      state.formData.parentId = menuDataProp.value.id;
    }
    // 添加新的按钮
    const addResourceParams = () => {
      state.formData.resourceList.push({
        resourceKey: "",
        resourceName: ""
      });
    };
    // 删除当前操作类型
    const delResourceParams = index => {
      state.formData.resourceList.splice(index, 1);
    };

    // 提交表单信息
    const onAddMenuList = async () => {
      try {
        const params = {
          ...state.formData
        };
        const { code, message } = await addMenuList(params);
        if (code === 200) {
          // successMessage(`${message}`);
          NotifMessage.success(message);
          handleCancel();
        } else {
          // warnMessage(`${message}`);
          NotifMessage.error(message);
        }
      } catch (err) {
        console.log(err);
      }
    };
    // 修改表单信息
    const onUpdateMenuList = async () => {
      try {
        const params = {
          ...state.formData
        };
        const { code, message } = await updateMenuList(params);
        if (code === 200) {
          NotifMessage.success(message);
          handleCancel();
        } else {
          NotifMessage.error(message);
        }
      } catch (err) {
        console.log(err);
      }
    };

    const handleRadio = () => {
      if (state.formData.isDisplay === IsDisplayEnum.SHOW_VAL) {
        state.formData.menuUrl = "";
      }
    };

    // 取消
    const handleCancel = () => {
      emit("emitClose");
    };
    // 确定
    const handleSubmit = () => {
      if (props.mode === "edit") {
        onUpdateMenuList();
      } else {
        onAddMenuList();
      }
    };
    // 表格显示错位，使用之前初始化
    onMounted(() => {
      nextTick(() => {
        if (tableRef.value) {
          tableRef.value.doLayout();
        }
      });
    });

    return {
      iconList,
      ...toRefs(state),
      IsDisplayEnum,
      IsLeafEnum,
      tableRef,
      // props,
      addResourceParams,
      delResourceParams,
      handleCancel,
      handleSubmit,
      handleRadio
    };
  }
});
</script>

<style lang="scss" scoped>
.menuSet {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;

  .content__body {
    width: 100%;
    flex: 1;
    padding: 15px;
    overflow-y: auto;
    overflow-x: hidden;
    &--table {
      padding: 0 15px 0 0;
      .table__footer--btn {
        margin-top: 10px;
        width: 100%;
        border: 1px dashed gray;
      }
    }
  }
  .content__footer {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    width: 100%;
    height: 60px;
    border-top: 1px solid rgba(0, 21, 41, 0.15);
    padding: 15px;
  }
}
.menuSet :deep .el-form-item__content {
  width: 95%;
}
</style>
